<!-- 部门管理 -->
<template>
  <div class="content">
    <!-- 筛选栏 -->
    <search-form ref="searchForm" :dataFilterShow="false">
      <div>
        <el-form-item label="所属渠道:" prop="channelTypeId">
          <el-cascader
            v-model="filterData.channelTypeId"
            :options="channelList"
            v-if="refresh"
            @change="handleChange"
            clearable
            :props="cascaderProps"
            key="1"
          ></el-cascader>
          <el-cascader
            v-model="filterData.channelTypeId"
            :options="channelList"
            v-else
            @change="handleChange"
            clearable
            :props="cascaderProps"
            key="2"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="渠道状态:" prop="state">
          <el-select v-model="filterData.state">
            <el-option label="请选择" value="">请选择</el-option>
            <el-option label="禁用" value="0">禁用</el-option>
            <el-option label="开启" value="1">开启</el-option>
          </el-select>
        </el-form-item>
      </div>
      <div slot="tool">
        <el-button type="primary" @click="updateChannel(1, {})">
          添加渠道
        </el-button>
        <el-button @click="reset(1, {})">
          重置
        </el-button>

        <!-- <el-button type="primary" @click="getDataList">查询</el-button> -->
      </div>
    </search-form>
    <!-- 列表栏 -->
    <filter-table
      ref="refFilterTable"
      :tableData="dataList.records"
      :pageData="dataList"
      @pageChange="pageChange"
      :loading="loading"
    >
      <template slot="table">
        <el-table-column
          prop="channelTypeName1"
          label="渠道类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="channelTypeName2"
          label="渠道名称"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.channelTypeName2 || '—' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="channelTypeName3"
          label="渠道细分"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.channelTypeName3 || '—' }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="{ row }">
            <span
              :style="{
                color: row.channelTypeId3
                  ? row.state3 == 0
                    ? '#e61d33'
                    : '#5caf29'
                  : ''
              }"
            >
              {{
                row.channelTypeId3 ? (row.state3 == 0 ? '禁用' : '开启') : '—'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="registerNumber" label="累计新增注册数">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.createTime3 || row.createTime2 || row.createTime1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="最近一次修改时间"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.updateTime3 || row.updateTime2 || row.updateTime1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateUser"
          label="最近一次修改人"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{
              row.updateUserName3 || row.updateUserName2 || row.updateUserName1
            }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.deptId != 1"
              @click="updateChannel(2, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </template>
    </filter-table>
    <!-- 新增编辑部门 -->
    <update-dept
      ref="updateDeptDialog"
      :isAdd="isAdd"
      :detailData="deptData"
      :deptList="dataList"
      :addEditVisible="addEditVisible"
    ></update-dept>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { parseTime, formatTime } from '@/utils'
import SearchForm from '@/components/searchForm/searchTable'
import FilterTable from '@/components/filterTable/index'
import { getChannelList, getChannelType } from '@/api/channelManage'
import UpdateDept from './components/updateDept'
export default {
  name: 'roleList',
  components: { SearchForm, FilterTable, UpdateDept },
  computed: {
    ...mapGetters(['name', 'userInfo'])
  },
  data() {
    return {
      loading: false,
      exportButtomLoading: false,
      addEditVisible: false,
      isAdd: 1,
      refresh: false,
      deptData: {},
      filterData: {
        channelTypeId: '',
        state: ''
      },
      cascaderProps: {
        lazy: true,
        lazyLoad: this.lazyload
      },
      channelList: [],
      dataList: [],
      newDataList: [],
      pagination: {
        page: 1,
        limit: 20
      },
      editChannelId: ''
    }
  },
  created() {},
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取列表数据
    getDataList() {
      this.loading = true
      getChannelList(Object.assign({}, this.filterData, this.pagination))
        .then(res => {
          this.dataList = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleChange(value) {
      if (value.length) {
        const id = value[value.length - 1]
        this.filterData.channelTypeId = id
      }
    },
    reset() {
      this.filterData.channelTypeId = ''
      this.filterData.state = ''
    },
    lazyload(node, callback) {
      const { level } = node
      if (level <= 2) {
        getChannelType({ channelParentId: node.value || 0 }).then(res => {
          callback(
            res.data.map(item => ({
              value: item.channelTypeId,
              label: item.channelTypeName,
              leaf: level >= 2
            }))
          )
        })
      } else {
        callback([])
      }
    },
    // 新增或修改
    updateChannel(type, item) {
      this.isAdd = type
      this.deptData = Object.assign({}, item)
      this.$refs.updateDeptDialog.addEditVisible = true
    },
    // 分页联动
    pageChange(pagedata) {
      setTimeout(() => {
        this.pagination = pagedata
      }, 1)
    }
  },
  watch: {
    filterData: {
      deep: true,
      handler(now, old) {
        this.pagination.page === 1
          ? this.getDataList()
          : (this.pagination.page = 1)
      }
    },
    pagination: {
      deep: true,
      handler(now, old) {
        this.getDataList()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
